<template>
	<view class="pageview flex flex-direction">
		<view class="flex-sub main">
			<mescroll-uni ref="mescrollItem0" :fixed="false" @init="mescrollInit" :down="downOption" @down="downCallback"
				:up="upOption" @up="upCallback">
				<view class="list">
					<u-swipe-action>
						<u-swipe-action-item @click="delDevice" :options="options" v-for="(item, index) in list"
							:key="item.deviceId" :name="item.deviceId">
							<view class="swipe-action item">
								<view class="swipe-action__content">
									<view class="flex align-center" @tap="navTo(item)">
										<view class="imgbox">
											<image v-if="item.imgDeviceTypeUrl" :src="filterUrl + item.imgDeviceTypeUrl.split(';')[0]"
												mode="aspectFit"></image>
										</view>
										<view class="flex-sub">
											<view class="name">{{ item.devName||'' }} <span class="mac">{{item.mac|filterMac}}</span></view>
											<view>{{ item.devType }}</view>
										</view>
									</view>
									<div class="electricityState" v-if="item.electricValue!=null">
										<div class="battery-indicator  u-flex  u-flex-column">
										    <div class="battery-container" :style="{'--battery-level': item.electricValue + '%'}">
										      <div class="battery-level" :class="{ 'low-battery': isLowBattery(item.electricValue) }"></div>
										      <div class="battery-head"></div>
										    </div>
										    <span class="battery-percent" :class="{ 'low-battery': isLowBattery(item.electricValue) }">
										      {{ item.electricValue }}%
										    </span>
										  </div>
									</div>
								</view>
							</view>
						</u-swipe-action-item>
					</u-swipe-action>
				</view>
			</mescroll-uni>
		</view>
		<view class="footerbar">
			<u-button type="primary" text="添加设备" shape="circle" @click="addDevice"></u-button>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				downOption: {
					auto: true // 不自动加载
				},
				upOption: {
					auto: true // 不自动加载
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: 'rgb(245, 108, 108)'
					}
				}],
				list: [],
				isInit: false
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		onShow() {
			this.isInit && this.mescroll && this.mescroll.resetUpScroll();
			this.isInit = true;
		},
		methods: {
			...mapMutations(['$uStore']),
			upCallback() {
				this.getDeviceList();
			},
			downCallback() {
				this.mescroll.resetUpScroll();
			},
			getDeviceList() {
				this.$postAction(this.$deviceapi.getDeviceList, {
					userId: this.userInfo.userId
				}).then(da => {
					this.list = da;
					console.log("设备数据",da)
					/* 保存设备信息 */
					this.$uStore({
						name: 'devicelist',
						value: da
					});
					this.mescroll.endSuccess(this.list.length, false);
				});
			},
			navTo(device) {
				let path = '';
				switch (device.deviceTypeCode) {
					case 'O2Max':
					case 'O2Ring': {
						path = '/pages/device/o2device';
						break;
					}
					case 'BP2A': {
						path = '/pages/device/bp2device';
						break;
					}
					case 'V3': {
						path = '/pages/device/v3device';
						break;
					}
					case 'F2Pro': {
						path = '/pages/device/f2device';
						break;
					}
					case 'ER': {
						path = '/pages/device/erdevice';
						break;
					}
					case 'GM501': {
						path = '/pages/device/dmdevice';
						break;
					}
				}
				if (path) {
					this.$Router.push({
						path: path + '?deviceType=' + device.deviceTypeCode + '&deviceMac=' + device.mac
					});
				}
			},
			addDevice() {
				this.$Router.push({
					path: '/pages/device/device'
				});
			},
			delDevice(info) {
				console.log('info', info);
				this.$postAction(this.$deviceapi.delDevice + '?id=' + info.name).then(da => {
					this.mescroll.resetUpScroll();
				});
			},
			isLowBattery: function(value) {
			  return value==undefined?false:value <= 20;
			}
		},
		filters: {
			filterMac: function(value) {
				if(value){
				return	value.split('-')[value.split('-').length-1]
				}else{
					return ''
				}
			},
			
		}
	};
</script>

<style scoped lang="scss">
	page,
	.pageview {
		height: 100%;
		width: 100%;
		background: #f7f7fc;
		box-sizing: border-box;

		.main {
			min-height: 0;
			overflow: auto;
		}
	}

	.list {
		padding: 20upx;

		/deep/ .u-swipe-action-item {
			background: #fff;
			box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
			margin-bottom: 20upx;
			border-radius: 20upx;
		}

		.item {
			padding: 20upx 30upx;
			color: #666;

			.name {
				color: #333;
				font-size: 30upx;
				margin-bottom: 10upx;
			}
			.mac{
				color: #d5d5d5;
				font-size: 30upx;
				margin-left: 10px;
			}
			.imgbox {
				width: 140upx;
				height: 140upx;
				margin-right: 20upx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}

	.footerbar {
		padding: 30upx 60upx;
		background: #fff;
	}
	.electricityState{
		position: absolute;
		right: 40upx;
		top: 60upx;
	}
	.battery-container {
	  --battery-level: 15%;
	  display: inline-block;
	  position: relative;
	 /* width: 60px;
	  height: 30px; */
	  width: 35px;
	  height: 15px;
	  border: 2px solid #333;
	  border-radius: 3px;
	  background: #f5f5f5;
	  margin-right: 5px;
	}
	
	.battery-head {
	  position: absolute;
	  right: -6px;
	  //top: 7px;
	   top: 0px;
	  width: 4px;
	  height: 10px;
	  background: #333;
	  border-radius: 0 2px 2px 0;
	}
	
	.battery-level {
	  position: absolute;
	  left: 2px;
	  top: 2px;
	  bottom: 2px;
	  width: var(--battery-level);
	  //background: var(--battery-color, #4CAF50);
	   background: #4CAF50;
	  border-radius: 1px;
	}
	
	.battery-percent {
	  display: inline-block;
	  font-family: Arial, sans-serif;
	  font-size: 14px;
	  vertical-align: middle;
	  color: #333;
	  font-weight: bold;
	  margin-top: 12upx;
	  text-align: center;
	}
	
	.low-battery {
	  color: #ff4444;
	}
	/* 低电量样式 */
	.battery-container .battery-level {
	
	  animation: pulse 1.5s infinite;
	  &.low-battery{
		 background: #ff4444;
	  }
	}
	
	@keyframes pulse {
	  0% { opacity: 1; }
	  50% { opacity: 0.6; }
	  100% { opacity: 1; }
	}
</style>